<template>
	<view>
		<ff-loading ref="loading" :isFull="true">
			<ff-page-save ref="save" @loadData="getData" @submit="submit">
				<template v-slot="{data}">
					{{data}}
					<ff-form :model="data" :rules="rules" ref="form" label-width="100px">
						<ff-form-item prop="name" label="名称" :rules="[
							      { required: true, message: '请输入名称', trigger: 'blur' },
							    ]">
							<u-input v-model="data.name"></u-input>
							<!-- <ff-input v-model="data.name"></ff-input> -->
						</ff-form-item>
						<ff-form-item prop="email" label="邮箱" :rules="[
							      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
							      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
							    ]">
							<u-input v-model="data.email"></u-input>
						</ff-form-item>
						<view>
							<ff-form-submit @click="$refs['save'].submit">保存</ff-form-submit>
							<ff-form-cancel @click="$refs['save'].reset">重置</ff-form-cancel>
						</view>
					</ff-form>
				</template>
			</ff-page-save>
		</ff-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					name: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					region: [{
						required: true,
						message: '请选择活动区域',
						trigger: 'change'
					}],
					date1: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					date2: [{
						type: 'date',
						required: true,
						message: '请选择时间',
						trigger: 'change'
					}],
					type: [{
						type: 'array',
						required: true,
						message: '请至少选择一个活动性质',
						trigger: 'change'
					}],
					resource: [{
						required: true,
						message: '请选择活动资源',
						trigger: 'change'
					}],
					desc: [{
						required: true,
						message: '请填写活动形式',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			getData(next) {
				this.$refs.loading.open();
				setTimeout(() => {
					next.complete({
						name: 'wang'
					});
					this.$refs.loading.close();
				}, 2000);
			},
			submit(data, next) {
				this.$refs.loading.open();
				setTimeout(() => {
					next.complete();
				}, 2000);
			},
		}
	}
</script>

<style>

</style>